<!--  -->
<template>
  <div class="switch-content" :class="getStateClass">
     <div class="switch-switch">
      <udsSwitch :value="switchState" @change="change"/>
    </div>
    <section class="switch-left">
      <header class="switch-title">{{ title }}</header>
      <p class="switch-text">{{ text }} {{getState}}</p>
    </section>
  </div>
</template>

<script>
export default {
  name: 'blueToothSwitch',
  props: {
    title: {
      type: String,
      required: true,
    },
    text: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      switchState: false,
    };
  },

  computed: {
    getState() {
      return this.switchState ? '已连接' : '未连接';
    },
    getStateClass() {
      return {
        switchClose: !this.switchState,
      };
    },
  },
  methods: {
    change(currentState) {
      this.switchState = currentState;
    },
  },
  components: {},
};
</script>

<style lang='scss' scoped>
.switch-content {
  width: 100%;
  background-color: #1376ff;
  transition: background-color 0.1s;
  border-radius: 8px;
  overflow: hidden;
  padding: 5px;
  height: 64px;
}
.switch-left {
  height: 100%;
  padding:8px 2px 8px 8px;
  color: #ffffff;
  overflow: hidden;
  text-align: start;
}
.switch-title {
  font-size: 14px;
  color: #ffffff;
  font-weight: 900;
  overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.switch-text {
  font-size: 12px;
  color: #ffffff;
  margin-top: 3px;
  overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.switch-switch{
    float: right;
    width: 26px;
    display: flex;
    height: 100%;
    margin-left: 10px;
}
.switch-content.switchClose{
  transition: background-color 0.1s;
  background-color:#f0f3f8;
  .switch-title ,.switch-text{
    color:#A1AFBC;
  }
}
</style>
